<template>
  <a-card :bordered="false">
    <!--导航区域-->
    <div>
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane :tab="$t('m.system.syslog.other.login_log')" key="1"></a-tab-pane>
        <a-tab-pane :tab="$t('m.system.syslog.other.operate_log')" key="2"></a-tab-pane>
      </a-tabs>
    </div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">

      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item :label="$t('m.system.syslog.entity.logContent')">
              <a-input placeholder="" v-model="queryParam.keyWord"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="12">
            <a-form-item :label="$t('m.common.label.begin_date')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker
                style="width: 210px"
                v-model="queryParam.createTimeRange"
                format="YYYY-MM-DD"
                :placeholder="[$t('m.common.label.begin_time'), $t('m.common.label.end_time')]"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="12" v-if="tabKey === '2'">
            <a-form-item :label="$t('m.system.syslog.entity.operateType')" style="left: 10px">
              <a-select v-model="queryParam.operateType" placeholder="">
                <a-select-option value="">{{this.$t('m.common.label.all')}}</a-select-option>
                <a-select-option v-for="item in operateType" :key="item.value" :value="item.value">
                  {{item.text}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">{{ $t('m.common.button.query') }}</a-button>
                <a-button type="default" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('m.common.button.reset') }}</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">
      <template slot="serialNum" slot-scope="text,record,index">
        {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
      </template>
      <div v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <div style="margin-bottom: 5px">
          <a-badge status="success" style="vertical-align: middle;"/>
          <span style="vertical-align: middle;">{{$t('m.system.syslog.other.request_method')}}: {{ record.method }}</span></div>
        <div>
          <a-badge status="processing" style="vertical-align: middle;"/>
          <span style="vertical-align: middle;">{{$t('m.system.syslog.other.request_parameters')}}: {{ record.requestParam }}</span></div>
      </div>
    </a-table>
    <!-- table区域-end -->
  </a-card>
</template>

<script>

  import { filterObj } from '@/utils/util'
  import { YcListMixin } from '@/mixins/YcListMixin'
  import YchConstant from "@/api/YchConstant";
  import LocaleUtil from "../../utils/LocaleUtil";

  const operateTypeArray = [
    {
      value: '1',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType1')
    },
    {
      value: '2',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType2')
    },
    {
      value: '3',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType3')
    },
    {
      value: '4',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType4')
    },
    {
      value: '5',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType5')
    },
    {
      value: '6',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType6')
    },
    {
      value: '7',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType7')
    },
    {
      value: '8',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType8')
    },
    {
      value: '9',
      text: LocaleUtil.getLocale('m.system.syslog.other.operateType9')
    }
  ]

  export default {
    name: 'LogList',
    mixins: [YcListMixin],
    data() {
      return {
        operateType: operateTypeArray,
        // 查询条件
        queryParam: {
          ipInfo: '',
          createTimeRange: [],
          logType: '1',
          keyWord: ''
        },
        tabKey: '1',
        // 表头
        columns: [
          {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            align: 'center',
            width: "50px",
            scopedSlots: { customRender: 'serialNum' },
          },
          {
            title: this.$t('m.system.syslog.entity.userid'),
            dataIndex: 'userid',
            align: 'center',
            width: "120px",
            sorter: true
          },
          {
            title: this.$t('m.system.syslog.entity.username'),
            dataIndex:'username',
            align: 'center',
            width: "120px",
            sorter: true
          },
          {
            title: this.$t('m.system.syslog.entity.logContent'),
            align: 'left',
            dataIndex: 'logContent',
            ellipsis: true,
            sorter: true
          },
          {
            title: this.$t('m.system.syslog.entity.ip'),
            dataIndex: 'ip',
            align: 'center',
            width: "150px",
            sorter: true
          },
          {
            title: this.$t('m.system.syslog.entity.os'),
            dataIndex: 'os',
            align: 'center',
            width: "100px",
            sorter: true
          },
          {
            title: this.$t('m.system.syslog.entity.browser'),
            dataIndex: 'browser',
            align: 'center',
            width: "100px",
            sorter: true
          },
          {
            title: this.$t('m.system.syslog.entity.createTime'),
            dataIndex: 'createTime',
            align: 'center',
            width: "180px",
            sorter: true
          },
          {
            title: this.$t('m.system.syslog.entity.operateType'),
            dataIndex: 'operateType',
            align: 'center',
            width: "130px",
            sorter: true,
            customRender: function(t, r, index) {
              const item = operateTypeArray.find(vo => vo.value == t)
              return item ? item.text : ''
            }
          }
        ],
        labelCol: {
          xs: { span: 1 },
          sm: { span: 2 }
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 16 }
        },
        url: {
          list: YchConstant.PREFIX_SYSTEM + '/log/list'
        }
      }
    },
    methods: {
      getQueryParams() {
        const param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize
        delete param.createTimeRange // 时间参数不传递后台
        if (this.superQueryParams) {
          param['superQueryParams'] = encodeURI(this.superQueryParams)
          param['superQueryMatchType'] = this.superQueryMatchType
        }
        return filterObj(param)
      },

      // 重置
      searchReset() {
        var that = this
        var logType = that.queryParam.logType
        that.queryParam = {} //清空查询区域参数
        that.queryParam.logType = logType
        that.loadData(this.ipagination.current)
      },
      // 日志类型
      callback(key) {
        // 动态添加操作类型列
        if (key == 2) {
          this.tabKey = '2'
          //this.columns.splice(4, 0, this.operateColumn)
          //this.columns.splice(2, 0, this.username)
          //this.columns.splice(2, 0, this.userid)
        } else if (this.columns.length == 8) {
          this.tabKey = '1'
          //this.columns.splice(2, 2)
          //this.columns.splice(4, 1)
        }

        let that = this
        that.queryParam.logType = key
        that.loadData()
      },
      onDateChange: function(value, dateString) {
        this.queryParam.createTime$ge = dateString[0]
        this.queryParam.createTime$le = dateString[1]
      },
      onDateOk(value) {
        //console.log(value)
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-card-body {
    padding: 10px 24px 5px 24px !important;
  }
</style>
